<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <script src="static/js/jquery-3.4.1.min.js"></script>
    <script src="static/layui/layui.js"></script>
    <link rel="stylesheet" href="static/layui/css/layui.css"  media="all">
</head>


<body class="layui-layout-body">

<style>
    .layui-layout-admin {
        height: 100%;
        background-color: #f0f2f5;
    }
    .layui-header {
        background: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }
    .layui-header .logo-container {
        padding-left: 15px;
        width: 600px;
        height: 60px;
        display: flex;
        align-items: center;
    }
    .layui-header .logo-container img {
        margin-right: 20px;
    }
    .layui-header .logo-container div {
        color: #fff;
        font-weight: bold;
        font-size: 18px;
    }
    .layui-layout-right {
        margin-right: 20px;
    }
    .layui-layout-right .layui-nav-item a {
        color: #fff;
    }
    .layui-side {
        background: linear-gradient(to bottom, #434343 0%, #000000 100%);
    }
    .layui-side-scroll {
        padding-top: 20px;
    }
    .layui-side-scroll .layui-nav-tree {
        color: #fff;
    }
    .layui-side-scroll .layui-nav-item {
        margin-bottom: 8px;
    }
    .layui-side-scroll .layui-nav-item a {
        color: #fff;
        padding: 12px 20px;
        font-size: 16px;
        transition: all 0.3s;
        position: relative;
        overflow: hidden;
    }
    .layui-side-scroll .layui-nav-item a:hover {
        background-color: rgba(255,255,255,0.1);
    }
    .layui-side-scroll .layui-nav-item.layui-this a {
        color: #fff;
        background: linear-gradient(to right, #fc6076 0%, #ff9a44 100%);
        box-shadow: 0 4px 15px rgba(252, 96, 118, 0.4);
    }
    .layui-side-scroll .layui-nav-item a:active:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        background: rgba(255,255,255,.5);
        opacity: 0;
        border-radius: 100%;
        transform: scale(1, 1) translate(-50%);
        transform-origin: 50% 50%;
    }
    .layui-side-scroll .layui-nav-item a:active:after {
        animation: ripple 0.6s ease-out;
    }
    @keyframes ripple {
        0% {
            transform: scale(0, 0);
            opacity: 1;
        }
        20% {
            transform: scale(25, 25);
            opacity: 1;
        }
        100% {
            opacity: 0;
            transform: scale(40, 40);
        }
    }
    .layui-side-scroll .layui-nav-item i {
        margin-right: 10px;
    }
    .layui-body {
        background: linear-gradient(to bottom right, #ece9e6 0%, #ffffff 100%);
    }
    .layui-body .content-wrapper {
        padding: 20px;
        width: 100%;
        height: 100%;
        box-shadow: inset 0 0 10px #ccc;
        background-color: #fff;
        border-radius: 8px;
    }
    .layui-body .content-wrapper iframe {
        width: 100%;
        height: 100%;
        border-radius: 8px;
    }
    .current-time {
        color: #fff;
        font-size: 14px;
        margin-left: 20px;
    }
</style>

<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="logo-container">
            <img width="120px" src="static/images/logos/diandian-logo2.jpg">
            <div style="font-size: 24px; font-weight: bold; color: #fff; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); letter-spacing: 2px;">企业后台管理</div>
            <span id="current-time" class="current-time"></span>
        </div>

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a id="name-a" href="javascript:;">
                    <img src="static/images/icons/diandian-icon.png" class="layui-nav-img">
                    ${(user.username)!"未登陆"}
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">更改密码</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a id="logout-a" href="/">注销</a></li>
            <li class="layui-nav-item"><a href="http://diandian2.cn">社区</a></li>
        </ul>
    </div>

    <div class="layui-side">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-this"><a href="/auth" target="admin-list"><i class="layui-icon layui-icon-user"></i> 权限管理</a></li>
                <li class="layui-nav-item"><a href="/department" target="admin-list"><i class="layui-icon layui-icon-group"></i> 部门管理</a></li>
                <li class="layui-nav-item"><a href="/position" target="admin-list"><i class="layui-icon layui-icon-diamond"></i> 职位管理</a></li>
                <li class="layui-nav-item"><a href="/employee" target="admin-list"><i class="layui-icon layui-icon-face-smile"></i> 员工管理</a></li>
                <li class="layui-nav-item"><a href="/post" target="admin-list"><i class="layui-icon layui-icon-notice"></i> 公告管理</a></li>
                <li class="layui-nav-item"><a href="/download" target="admin-list"><i class="layui-icon layui-icon-download-circle"></i> 下载中心</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 - 局部刷新, 使用iframe进行实现 -->
        <div class="content-wrapper">
            <iframe name="admin-list" scrolling="no" src="/auth" frameborder="0"></iframe>
        </div>
    </div>
</div>

</body>

<a href="javascript:;" id="toTop" title="回到顶部" style="display: none; position: fixed; bottom: 30px; right: 30px; background-color: #009688; color: #fff; padding: 10px 15px; border-radius: 50%; font-size: 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); z-index: 999;">
    <i class="layui-icon layui-icon-up"></i>
</a>

<script src="static/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['element', 'layer'], function(){
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

        //监听导航点击
        element.on('nav(test)', function(elem){
            console.log('点击了菜单：' + elem.text());
        });

        $("#logout-a").click(function () {
            $.ajax({
                url: '/auths/logout',
                success: function (res) {
                    window.location.href = "/login";
                }
            });
        });

        // 实时显示当前时间
        function updateTime() {
            var now = new Date();
            var year = now.getFullYear();
            var month = (now.getMonth() + 1).toString().padStart(2, '0');
            var day = now.getDate().toString().padStart(2, '0');
            var hours = now.getHours().toString().padStart(2, '0');
            var minutes = now.getMinutes().toString().padStart(2, '0');
            var seconds = now.getSeconds().toString().padStart(2, '0');
            var formattedTime = year + '年' + month + '月' + day + '日 ' + hours + ':' + minutes + ':' + seconds;
            $('#current-time').text(formattedTime);
        }

        // 每秒更新时间
        setInterval(updateTime, 1000);

        // 页面加载时立即显示时间
        updateTime();

        // 回到顶部按钮显示/隐藏逻辑
        $(window).scroll(function() {
            if ($(this).scrollTop() > 200) {
                $('#toTop').fadeIn();
            } else {
                $('#toTop').fadeOut();
            }
        });

        $('#toTop').click(function() {
            $('html, body').animate({scrollTop : 0},800);
            return false;
        });
    });
</script>
</html>